<template>
  <div class="app-container">
    <div class="sumList">
      <template v-for="(item,i) in totalObject">
        <div :key="i" class="item" :class="{'active':active==i}" @click="toFnCout(item.payStatus,i)">
          <div class="num">{{ item.amount+'/'+item.recordCount }}</div>
          <div class="desc"><span>{{ item.key+'/'+ item.desKey }}</span></div>
        </div>
      </template>
    </div>
    <div class="app-title">查询条件</div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">用户ID</label>
        <el-input
          v-model="searchForm.userId"
          class="search-item"
          placeholder="请输入用户ID"
          onkeyup="value=value.replace(/[^\d|^.]/g, '')"
        />
      </div>
      <div class="searchItem">
        <label for="">订单编号</label>
        <el-input
          v-model="searchForm.orderNo"
          class="search-item"
          placeholder="请输入订单编号"
        />
      </div>

      <div class="searchItem">
        <label for="">创建时间</label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="创建时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
          @change="fnTime"
        />
      </div>
      <div class="searchItem">
        <label for="">手机号</label>
        <el-input
          v-model="searchForm.mobile"
          class="search-item"
          placeholder="请输入手机号"
        />
      </div>
      <div class="searchItem">
        <label for="">类型:</label>
        <el-select
          v-model="searchForm.orderType"
          placeholder="全部"
          @change="fnChange"
        >
          <!--  1发布服务订单 3车辆检测订单  2 担保金（保证购车），4 平台服务费(简易购车) -->
          <el-option label="全部" value="" />
          <el-option label="发布服务订单" value="1" />
          <el-option label="车辆检测订单" value="3" />
          <el-option label="担保金（保证购车）" value="2" />
          <el-option label="平台服务费(简易购车)" value="4" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">车辆ID</label>
        <el-input
          v-model="searchForm.carInfoId"
          class="search-item"
          placeholder="请输入车辆ID"
          onkeyup="value=value.replace(/[^\d|^.]/g, '')"
        />
      </div>
      <div class="searchItem">
        <label for="">第三方订单编号</label>
        <el-input
          v-model="searchForm.thirdTradeNo"
          class="search-item"
          placeholder="请输入第三方订单编号"
          onkeyup="value=value.replace(/[^\d|^.]/g, '')"
        />
      </div>

      <div class="searchItem">
        <label for="">流程状态 :</label>
        <el-select v-model="searchForm.vehicleOrderStatus" placeholder="全部" filterable>
          <el-option label="进行中" value="0" />
          <el-option label="已完成" value="1" />
          <el-option label="已关闭" value="2" />
        </el-select>
      </div>

      <div class="searchItem">
        <el-button
          v-hasPermission="['valuation:search']"
          class="searchItembtn"
          type="primary"
          @click="search"
        >
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
    </div>
    <div class="app-title">订单管理列表</div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        :show-overflow-tooltip="true"
        align="center"
        width="50px"
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      />
      <el-table-column
        label="订单编号"
        prop="orderNo"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      />
      <el-table-column
        label="第三方订单号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
        prop="thirdTradeNo"
      />
      <el-table-column
        label="用户ID"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
        prop="userId"
      />
      <el-table-column
        label="手机号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
        prop="mobile"
      />
      <el-table-column
        label="车辆ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="carInfoId"
        min-width="80px"
      />
      <el-table-column
        label="类型"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ ['', '发布服务订单','担保金（保证购车）', '车辆检测订单' ,' 平台服务费(简易购车)'][scope.row.orderType] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="支付金额(元)"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
        prop="payAmount"
      >
        <template slot-scope="scope">
          {{ Number(scope.row.payAmount).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column
        label="支付时间"
        :show-overflow-tooltip="true"
        align="center"
        prop="payTime"
        min-width="150px"
      />
      <el-table-column
        label="订单状态"
        :show-overflow-tooltip="true"
        align="center"
        prop="buserId"
        min-width="150px"
      >
        <template slot-scope="scope">
          {{ ['未支付','已支付','支付失败','已退款','退款失败','部分退款'][scope.row.payStatus] }}

        </template>
      </el-table-column>

      <el-table-column
        label="流程状态"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <span>{{
            ["进行中", "已完成", "已关闭"][scope.row.vehicleOrderStatus]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="流程编号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.orderType=='1'?'':scope.row.vehicleOrderNo
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link
            v-hasPermission="['usercenter:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>
        </template>

      </el-table-column></el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
    <!-- <Dialog :id="lookId" :visible="dialogVisible" @fnClose="myclose" /> -->
    <el-dialog title="" :visible.sync="viewDialogVisible" width="30%">
      <img :src="previewUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
// import Dialog from './dialog.vue'
export default {
  components: {
    Pagination
    // Dialog
  },
  data() {
    return {
      active: 0,
      allCount: 0,
      submitFormEdit: true,
      viewDialogVisible: false,
      previewUrl: '',
      editForm: {
        price: ''
      },
      totalObject: [
        {
          key: '全部总金额',
          desKey: '订单数',
          payStatus: '',
          'recordCount': 0, // 总记录条数
          'amount': 0 // 总金额
        },
        {
          key: '待支付总金额',
          desKey: '订单数',
          payStatus: '0',
          'recordCount': 0, // 总记录条数
          'amount': 0 // 总金额
        }, {
          key: '已支付总金额',
          desKey: '订单数',
          payStatus: '1',
          'recordCount': 0, // 总记录条数
          'amount': 0 // 总金额
        }, {
          key: '已取消总金额',
          desKey: '订单数',
          payStatus: '2',
          'recordCount': 0, // 总记录条数
          'amount': 0 // 总金额
        }, {
          key: '已退款总金额',
          desKey: '订单数',
          payStatus: '3',
          'recordCount': 0, // 总记录条数
          'amount': 0 // 总金额
        }
      ],
      searchForm: {
        'sCreateTime': '', // 开始创建时间
        'eCreateTime': '', // 最终创建时间
        'orderType': '', // 订单类型:   1发布服务订单 3车辆检测订单  2 担保金（保证购车），4 平台服务费(简易购车)
        'orderId': '', // 订单id
        'userId': '', // 用户id
        'orderNo': '', // 订单号
        'thirdTradeNo': '', // 第三方订单号
        'payStatus': '', // 支付状态 (0-未支付,1-已支付,2-支付失败,3-已退款,4退款失败,5部分退款)
        'vehicleOrderStatus': '', // 车辆订单状态：0进行中，1已完成，2已关闭
        'carInfoId': '', // 车辆id
        'mobile': '' // 用户手机号
      },
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      loading: false,
      tableKey: 0,
      dateTime: '',
      list: [],
      lookId: 0,
      dialogVisible: false,
      editdialogVisible: false,
      paginations: {
        pageSize: 5,
        pageNum: 1
      },
      total2: 0,
      list1: []
    }
  },
  created() {
    this.getCarVinReportCount()

    this.search()
  },
  methods: {
    getCarVinReportCount() {
      this.$post(
        `/web/vehicleOrder/getVOrderPayStatis`
        , {
          entity: {
            ...this.searchForm
          },
          queryRequest: {
            ...this.pagination
          }
        }, 'json').then((res) => {
        if (res.data.code === '0') {
          this.totalObject[0].recordCount = res.data.data.total.recordCount
          this.totalObject[0].amount = res.data.data.total.amount
          this.totalObject[1].amount = res.data.data.noPay.amount
          this.totalObject[1].recordCount = res.data.data.noPay.recordCount
          this.totalObject[2].amount = res.data.data.yetPay.amount
          this.totalObject[2].recordCount = res.data.data.yetPay.recordCount
          this.totalObject[3].amount = res.data.data.cancelPay.amount
          this.totalObject[3].recordCount = res.data.data.cancelPay.recordCount
          this.totalObject[4].amount = res.data.data.refund.amount
          this.totalObject[4].recordCount = res.data.data.refund.recordCount
        }
        console.log(this.totalObject)
      })
    },
    fnTime(e) {
      this.getCarVinReportCount()
    },
    fnChange(e) {
      this.getCarVinReportCount()
    },
    toFnCout(e, i) {
      this.active = i
      this.pagination.pageNum = 1
      this.pagination.pageSize = 10
      this.searchForm.payStatus = e
      this.search()
    },
    view(row) {
      console.log(row)
      this.$router.push({
        name: 'orderDetail',
        query: {
          orderId: row.orderId,
          orderType: row.orderType
        }
      })
    },
    openView(url) {
      this.viewDialogVisible = true
      this.previewUrl = url
    },
    async search(e) {
      // const { aplus_queue } = window
      // console.log(aplus_queue, 555)
      // aplus_queue.push({
      //   action: 'app_user',
      //   arguments: ['app_user', 'CLK', {
      //     url: window.location.href
      //   }]
      // })
      this.getCarVinReportCount()
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      if (this.dateTime) {
        this.searchForm.sCreateTime = `${this.dateTime[0]}`
        this.searchForm.eCreateTime = `${this.dateTime[1]}`
      }
      this.loading = true
      this.searchForm.userId = this.searchForm.userId.replace(/[^\d|^.]/g, '')
      try {
        // /webzlh/reportBase/list/report?userNameOrMobile=13008800250&pageNum=1&pageSize=20
        const result = await this.$post(`/web/vehicleOrder/getVOrderPayList`, {
          entity: {
            ...this.searchForm
          },
          queryRequest: {
            ...this.pagination
          }
        }, 'json')
        if (result.data.code === '0') {
          this.loading = false
          this.list = result.data.data.rows
          this.total = result.data.data.total
        } else {
          this.loading = false
          this.$message.error(result.data.message)
        }
      } catch (error) {
        this.loading = false
      }
    },
    isAssetTypeAnImage(ext) {
      var index = ext.lastIndexOf('.')
      ext = ext.substr(index + 1)
      return (
        [
          'png',
          'jpg',
          'jpeg',
          'bmp',
          'gif',
          'webp',
          'psd',
          'svg',
          'tiff'
        ].indexOf(ext.toLowerCase()) !== -1
      )
    },
    reset() {
      const list = Object.keys(this.searchForm)
      list.forEach((element) => {
        this.searchForm[element] = ''
      })
      this.dateTime = ''
      this.search()
    },
    look(row) {
      this.lookId = row.id
      this.dialogVisible = true
      // this.$get('web/carVinReport/getDetail?id=2').then(res => {
      //   console.log(res)
      // })
    },
    myclose() {
      this.dialogVisible = false
    },
    setPrice() {
      this.editdialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.sumList {
  margin: 20px 10px;
  display: flex;
  justify-content: space-evenly;
  .item {
   cursor: pointer;
    width: 160px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 20px;
    line-height: 36px;
    text-align: center;
    &.active{
      background: #66b1ff;
      color: #fff;
    }
  }
}
</style>
